~{define "components/contextMenuGlobal"}~
<style>
    .context-menu {
        position: absolute;
        background-color: white;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
        display: none;
        z-index: 10000;
        padding-left: 0;
    }

    .context-menu.active {
        display: block;
    }

    .context-menu li {
        list-style: none;
        padding: 8px 12px;
        cursor: pointer;
    }

    .context-menu li:hover {
        background-color: #eee;
    }

    .context-menu li[divider] {
        /* color: #666; */
        border-top: 1px solid #ccc;
    }
</style>
<!-- 创建一个全局的右键菜单 -->
<ul class="context-menu">
    <li id="copy">复制</li>
    <li id="cut">剪切</li>
    <li id="paste">粘贴</li>
    <li id="selectAll" divider>全选</li>
</ul>
<!-- 菜单操作 函数 -->
<script>
    let currentElement;  // 用于存储当前右键点击的文本框或文本区域

    document.addEventListener('contextmenu', function (event) {
        const isTextBox = (event.target.tagName === 'INPUT' &&
            (event.target.type === 'text' || event.target.type === 'password')) ||
            event.target.tagName === 'TEXTAREA';

        const menu = document.querySelector('.context-menu');

        if (isTextBox) {
            event.preventDefault();  // 禁用默认的右键菜单

            currentElement = event.target;  // 存储当前点击的元素

            menu.style.display = 'block';
            menu.style.left = `${event.pageX}px`;
            menu.style.top = `${event.pageY}px`;
        } else {
            menu.style.display = 'none';
            event.preventDefault();  // 禁用非文本框区域的默认右键菜单
        }
    });

    document.addEventListener('click', function () {
        const menu = document.querySelector('.context-menu');
        menu.style.display = 'none';
    });

    // 剪切操作
    document.getElementById('cut').addEventListener('click', function () {
        if (currentElement) {
            const selectedText = currentElement.value.substring(currentElement.selectionStart, currentElement.selectionEnd);
            if (selectedText) {
                window.clipboard.copy(selectedText, '剪切成功');

                // navigator.clipboard.writeText(selectedText).then(() => {
                const start = currentElement.selectionStart;
                const end = currentElement.selectionEnd;
                currentElement.value = currentElement.value.slice(0, start) + currentElement.value.slice(end);
                currentElement.setSelectionRange(start, start);
                // });
            }
        }
    });

    // 复制操作
    document.getElementById('copy').addEventListener('click', function () {
        if (currentElement) {
            const selectedText = currentElement.value.substring(currentElement.selectionStart, currentElement.selectionEnd);
            if (selectedText) {
                // navigator.clipboard.writeText(selectedText);
                window.clipboard.copy(selectedText);
            }
        }
    });

    // 粘贴操作
    document.getElementById('paste').addEventListener('click', async function () {
        if (currentElement && navigator.clipboard) {
            try {
                const text = await navigator.clipboard.readText();
                const start = currentElement.selectionStart;
                const end = currentElement.selectionEnd;
                const value = currentElement.value;

                currentElement.value = value.slice(0, start) + text + value.slice(end);
                currentElement.setSelectionRange(start + text.length, start + text.length);
            } catch (err) {
                console.error('Failed to read clipboard contents: ', err);
                alert('剪贴板读取失败')
            }
        } else {
            alert('当前站点不支持粘贴，请使用CTRL+V快捷键');
        }
    });

    // 全选操作
    document.getElementById('selectAll').addEventListener('click', function () {
        if (currentElement) {
            currentElement.select();
        }
    });        
</script>
~{end}~